<!-- 监测车点位设置 -->
<template>
  <div class="newTest">
    <div class="title" style="border-bottom: 1px solid #eee;">点位设置</div>
    <div class="searchBox">
      <el-form
        label-position="top"
        inline
        :model="searchForm"
        size="mini"
        style="max-height: 100px;"
      >
        <el-form-item>
          <p slot="label" class="miniLabel">监测车编号</p>
          <el-select v-model="searchForm.vehicleNumber" placeholder="请选择编号">
            <el-option
              v-for="item in cartList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="searchBtns">
            <el-button type="success" class="greenBtn" @click="searchClick()">确定</el-button>
            <el-button
              type="success"
              class="greenBtn"
              @click="addBtnClick(false)"
              v-if="!userInfo.roles.includes('manager') && !userInfo.roles.includes('environmentalDirector')"
            >新增</el-button>
          </p>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <mergeTable
      :tableData="pointList"
      :tableConfig="tableConfig"
      :attributes="{
          border: true,
          headerCellStyle: {
            backgroundColor: 'transparent',
          },
          cellStyle: {
            height: '50px',
            backgroundColor: 'transparent',
          },
          headerRowStyle: {
            backgroundColor: 'transparent'
          },
          rowStyle: {
            backgroundColor: 'transparent'
          }
        }"
    >
      <el-table-column slot="times" align="center" label="监测时间">
        <template slot-scope="{ row }">
          <div>
            <span>{{row.gmtCreate}}</span>
            至
            <span>{{row.addlasttime}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column slot="statisticType" align="center" label="水站数据统计类型">
        <template slot-scope="{ row }">
          <div>
            <span v-if="row.statisticType === 0">安志监测车</span>
            <span v-else>外接监测车</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        slot="operation"
        align="center"
        label="操作"
        v-if="!userInfo.roles.includes('manager') && !userInfo.roles.includes('environmentalDirector')"
      >
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="addBtnClick(row)">修改</el-button>
        </template>
      </el-table-column>
    </mergeTable>

    <!-- 新增弹出框 -->
    <el-dialog
      :title="dilogTitle"
      :visible.sync="dilogVisible"
      @close="close"
      width="50%"
      class="abow_dialog dialog"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="form" label-width="140px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="监测车编号" prop="vehicleNumber">
              <el-select v-model="form.vehicleNumber" placeholder="请选择编号" disabled>
                <el-option
                  v-for="item in cartList"
                  :key="item.number"
                  :label="item.number"
                  :value="item.number"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水站数据统计类型" prop="statisticType">
              <el-select v-model="form.statisticType" placeholder="请选择水站数据统计类型">
                <el-option
                  v-for="item in statisticList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位名称" prop="pointName">
              <el-input v-model="form.pointName" placeholder="请输入内容" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位简称" prop="abbreviation">
              <el-input v-model="form.abbreviation" placeholder="请输入简称" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入经度" class="form-input"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="监测因子" prop="pollutionFactor">
              <el-select v-model="form.pollutionFactor" multiple placeholder="请选择监测因子">
                <el-option
                  v-for="item in factorList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点日报周报排序" prop="orderNum">
              <el-input v-model="form.orderNum" placeholder="请输入站点日报周报排序" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点负责人" prop="principal">
              <el-input v-model="form.principal" placeholder="请输入站点负责人" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入运维单位" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式" prop="personPhone">
              <el-input v-model="form.personPhone" placeholder="请输入负责人联系方式" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地理位置" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入地理位置"
                type="textarea"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属街道办" prop="streetId">
              <el-select v-model="form.streetId" placeholder="请选择街道">
                <el-option
                  v-for="item in streetList"
                  :key="item.streetId"
                  :label="item.streetName"
                  :value="item.streetId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer" id="dialog-footer">
        <el-button type="primary" @click="submitAction(1)">提交</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      :title="dilogTitle"
      :visible.sync="modifyTips"
      width="50%"
      class="abow_dialog dialog"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="form" label-width="140px" :rules="rulesUpdata">
        <el-row>
          <el-col :span="12">
            <el-form-item label="监测车编号" prop="vehicleNumber">
              <el-select v-model="form.vehicleNumber" placeholder="请选择编号" disabled>
                <el-option
                  v-for="item in cartList"
                  :key="item.number"
                  :label="item.number"
                  :value="item.number"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水站数据统计类型" prop="statisticType">
              <el-select v-model="form.statisticType" placeholder="请选择水站数据统计类型" disabled>
                <el-option
                  v-for="item in statisticList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位名称" prop="pointName">
              <el-input v-model="form.pointName" placeholder="请输入内容" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位简称" prop="abbreviation">
              <el-input v-model="form.abbreviation" placeholder="请输入简称" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" class="form-input"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="监测因子" prop="pollutionFactor">
              <el-select v-model="form.pollutionFactor" multiple placeholder="请选择监测因子">
                <el-option
                  v-for="item in factorList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点日报周报排序" prop="orderNum">
              <el-input v-model="form.orderNum" placeholder="请输入站点日报周报排序" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点负责人" prop="principal">
              <el-input v-model="form.principal" placeholder="请输入站点负责人" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入运维单位" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式" prop="personPhone">
              <el-input v-model="form.personPhone" placeholder="请输入负责人联系方式" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地理位置" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入地理位置"
                type="textarea"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属街道办" prop="streetId">
              <el-select v-model="form.streetId" value="form.streetName" placeholder="请选择街道">
                <el-option
                  v-for="item in streetList"
                  :key="item.streetId"
                  :label="item.streetName"
                  :value="item.streetId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" id="dialog-footer">
        <el-button type="primary" @click="submitAction(2)">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCartList,
  pointAdd,
  getStreetList,
  getPointList,
  updatePonit,
  factorAll,
} from "@/http/api";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      rules: {
        vehicleNumber: [
          { required: true, message: "请选择编号", trigger: "change" },
        ],
        streetId: [
          { required: true, message: "请选择街道", trigger: "change" },
        ],
        pollutionFactor: [
          { required: true, message: "请选择监测因子", trigger: "change" },
        ],
        pointName: [{ required: true, message: "请输入内容", trigger: "blur" }],
        abbreviation: [
          { required: true, message: "请输入简称", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请输入运维单位", trigger: "blur" }],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        principal: [
          { required: true, message: "请输入站点负责人", trigger: "blur" },
        ],
        orderNum: [
          {
            required: true,
            message: "请输入站点日报周报排序",
            trigger: "blur",
          },
        ],
        personPhone: [
          { required: true, message: "请输入负责人联系方式", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入地理位置", trigger: "blur" },
        ],
      },
      rulesUpdata: {
        pollutionFactor: [
          { required: true, message: "请选择监测因子", trigger: "change" },
        ],
        principal: [
          { required: true, message: "请输入站点负责人", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请输入运维单位", trigger: "blur" }],
        personPhone: [
          { required: true, message: "请输入负责人联系方式", trigger: "blur" },
        ],
        abbreviation: [
          { required: true, message: "请输入简称", trigger: "blur" },
        ],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        address: [
          { required: true, message: "请输入地理位置", trigger: "blur" },
        ],
        orderNum: [
          {
            required: true,
            message: "请输入站点日报周报排序",
            trigger: "blur",
          },
        ],
        streetId: [
          { required: true, message: "请选择街道", trigger: "change" },
        ],
        pointName: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      searchForm: {
        vehicleNumber: "",
      },
      dilogTitle: "新增",
      // factorList: [
      //   {
      //     value: 1,
      //     label: "pH",
      //   },
      //   {
      //     value: 2,
      //     label: "CODcr",
      //   },
      //   {
      //     value: 3,
      //     label: "总铬",
      //   },
      //   {
      //     value: 4,
      //     label: "氨氮",
      //   },
      //   {
      //     value: 5,
      //     label: "总氮",
      //   },
      //   {
      //     value: 6,
      //     label: "总磷",
      //   },
      //   {
      //     value: 7,
      //     label: "总铜",
      //   },
      //   {
      //     value: 8,
      //     label: "总镍",
      //   },
      //   {
      //     value: 9,
      //     label: "总氰化物",
      //   },
      // ],
      dilogVisible: false,
      form: {
        vehicleNumber: "",
        pointName: "",
        pollutionFactor: "",
        streetId: "",
        latitude: "",
        longitude: "",
        personPhone: "",
        principal: "",
        abbreviation: "",
        address: "",
        orderNum: null,
        statisticType: null,
        unit: "",
      },
      tableConfig: [
        { prop: "vehicleNumber", label: "监测车编号", align: "center" },
        { prop: "times", slot: "times", align: "center" },
        { prop: "statisticType", slot: "statisticType", align: "center" },
        { prop: "orderNum", label: "站点日报周报排序", align: "center" },
        { prop: "pointName", label: "点位名称", align: "center" },
        { prop: "address", label: "地理位置", align: "center" },
        { prop: "streetName", label: "所属街道办", align: "center" },
        { prop: "pollutionFactor", label: "监测因子", align: "center" },
        { prop: "principal", label: "站点负责人", align: "center" },
        { prop: "personPhone", label: "负责人联系方式", align: "center" },
        { prop: "unit", label: "运维单位", align: "center" },
        { prop: "operation", slot: "operation" },
      ],
      factorList: [],
      modifyTips: false,
      cartList: [],
      streetList: [],
      pointList: [],
      statisticList: [
        {
          id: 0,
          name: "安志监测车",
        },
        {
          id: 1,
          name: "外接监测车",
        },
      ],
    };
  },
  created() {
    // 获取监测车编号
    this.getCartListAction();
    // 获取所属街道列表
    this.getStreetListAction();
    // 查询所有监测因子
    this.getfactorAll();
  },
  computed: {
    ...mapGetters({
      userInfo: "getUserInfo",
    }),
  },
  methods: {
    async getfactorAll() {
      factorAll().then((res) => {
        this.factorList = res.data;
      });
    },
    // 获取监测车编号
    async getCartListAction() {
      let data = await getCartList();
      if (data) {
        this.searchForm.vehicleNumber = data.data[0].name;
        let dataList = await getPointList(this.searchForm);
        let arr = [];
        arr[0] = dataList.data;
        arr.forEach((data) => {
          data.addlasttime = this.$getLocalTime(new Date());
        });
        this.pointList = arr;
      }
      this.cartList = data.data;
    },
    // 获取所属街道列表
    async getStreetListAction() {
      let data = await getStreetList();
      this.streetList = data.data;
    },

    //新增或修改
    addBtnClick(scope) {
      if (scope === false) {
        this.dilogVisible = true;
        this.dilogTitle = "新增";
        this.resetForm();
        this.form.vehicleNumber = this.searchForm.vehicleNumber;
      } else {
        this.modifyTips = true;
        this.dilogTitle = "修改";
        Object.assign(this.form, scope);
        this.form.pollutionFactor = this.form.pollutionFactor.split(",");
      }
    },
    //提交操作
    async submitAction(id) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          var message;
          id == 1 ? (this.dilogVisible = false) : (this.modifyTips = false);
          if (this.form && this.form.pollutionFactor.length > 0) {
            this.form.pollutionFactor = this.form.pollutionFactor.join(",");
          }
          if (id === 1) {
            pointAdd(this.form).then((res) => {
              if (res) {
                this.getPointList(this.searchForm);
                this.$notify({
                  title: "成功",
                  message: res.info,
                  type: "success",
                });
                this.resetForm();
              }
            });
          } else {
            updatePonit(this.form).then((res) => {
              if (res) {
                this.getPointList(this.searchForm);
                this.$notify({
                  title: "成功",
                  message: res.info,
                  type: "success",
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 获取站点信息列表
    async getPointList(params) {
      let data = await getPointList(params);
      let arr = [];
      this.pointList = [];
      arr[0] = data.data;
      this.$nextTick(() => {
        arr.forEach((data) => {
          data.addlasttime = this.$getLocalTime(new Date());
        });
        this.pointList = arr;
      });
    },
    // Dialog 关闭的回调
    close() {
      this.resetForm();
    },
    // 确认搜索
    searchClick() {
      if (this.searchForm.vehicleNumber.length > 0) {
        this.getPointList(this.searchForm);
      }
    },
    resetForm() {
      //重置表单
      this.form = {
        vehicleNumber: "",
        pointName: "",
        pollutionFactor: "",
        streetId: "",
        latitude: "",
        longitude: "",
        personPhone: "",
        principal: "",
        abbreviation: "",
        address: "",
        orderNum: null,
        statisticType: null,
        unit: "",
      };
    },
  },
};
</script>

<style scoped lang="scss">
#dialog-footer {
  display: flex !important;
  justify-content: center;
}
.newTest .el-dialog .el-dialog__footer {
  display: flex !important;
  justify-content: center;
  color: red;
}
.newTest {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 10px 20px;
}
.newTest {
  .title {
    position: relative;
    left: 15px;
    line-height: 70px;
    font-size: 16px;
  }
  .title::before {
    content: "";
    position: absolute;
    left: -15px;
    width: 4px;
    height: 20px;
    top: 25px;
    background-color: #2399ff;
  }
}
.searchBox {
  padding: 20px 20px 0;
  margin-bottom: 20px;
  background-color: #fff;
  .miniLabel {
    line-height: 0;
  }
}

.searchBtns {
  margin-top: 19px;
}

.el-dialog {
  z-index: 3000 !important;
}
.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
}
.dataChartCnt {
  background-color: #fff;
  padding: 0 20px;
}

.form-input {
  width: 200px;
}

.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
}

.abow_dialog .el-dialog {
  position: absolute;
  left: 0;
  top: 54px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
</style>
